<template>
    <div class="nav_banner">
        <ul class="nav_banner_pic">
            <li class="f-l"><a href="#"><img src="images/jiang_img/xmad_15338857534213_DaEjU.jpg" alt=""></a></li>
            <li class="f-l"><a href="#"><img src="images/jiang_img/xmad_15248221330196_tvCXl.jpg" alt=""></a></li>
            <li class="f-l"><a href="#"><img src="images/jiang_img/xmad_15338647997541_BeNrA.jpg" alt=""></a></li>
            <li class="f-l"><a href="#"><img src="images/jiang_img/xmad_15347308154073_jqOnp.jpg" alt=""></a></li>
            <li class="f-l"><a href="#"><img src="images/jiang_img/xmad_15338982677936_eQTJk.jpg" alt=""></a></li>
        </ul>
        <ul class="nav_banner_list" >
            <li class="f-l"><a href="#"></a></li>
            <li class="f-l"><a href="#"></a></li>
            <li class="f-l"><a href="#"></a></li>
            <li class="f-l"><a href="#"></a></li>
            <li class="f-l"><a href="#"></a></li>
        </ul>
    </div>
</template>
<script>
    export default{

    }
</script>
<style scoped>
.nav_banner{
    width: 1200px;
    height: 460px;
    overflow: hidden;
}
.nav_banner>.nav_banner_pic{
    width: 6000px;
}
.nav_banner>.nav_banner_pic img{
    width: 1200px;
    height: 460px;
}
.nav_banner>.nav_banner_list{
    position: absolute;
    right: 30px;
    bottom: 0px;
}
.nav_banner>.nav_banner_list>li>a{
    display: block;
    width: 8px;
    height: 8px;
    border: 1px solid #aaa;
    background-color: #aaaaaa;
    border-radius: 50%;
    margin-left: 10px;
}
.nav_banner>.nav_banner_list>li>a:hover{
    background-color: #fff;
}
</style>
